import React, { useState, useRef, useEffect } from 'react';
import Lyf from '../assets/1.jpg';
import styles from "./index.module.css"
import MagifierTools from "../tools/magifierTools"

const CanvasMagnifier: React.FC = () => {
  const [magnifierShape, setMagnifierShape] = useState('circle');
  const [magnifierSize, setMagnifierSize] = useState(50)
  const [magnifierBorderSize, setMagnifierBorderSize] = useState(2)
  const [zoom, setZoom] = useState(0.766 * 1.5)

  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const magnifierRef = useRef<HTMLCanvasElement | null>(null);
  const magnifierShaperOnchange = (e: any) => {
    setMagnifierShape(e.target.value)
  }
  const magnifierSizeOnchange = (e: any) => {
    setMagnifierSize(+e.target.value)
  }
  const magnifierBorderSizeOnchange = (e: any) => {
    setMagnifierBorderSize(+e.target.value)
  }
  const zoomOnchange = (e: any) => {
    setZoom(+e.target.value)
  }

  useEffect(() => {
    const canvas = canvasRef.current;
    const magnifier = magnifierRef.current;

    if (canvas && magnifier) {
      MagifierTools.initializeCanvas(canvas, magnifier, Lyf, magnifierSize, zoom,); 
    }
  }, [magnifierSize, zoom]);

  return (
    <div className={styles.outerWrapper}>
      <header className={styles.header}>
        <div className={styles.headerWrapper}>
          <h2>Umi Ts Canvas</h2>
        </div>
      </header>

      <div className={styles.contentWrapper}>
        <h2>图片放大镜 Dispaly</h2>

        <div className={styles.containerWrapper}>
          <div className={styles.canvasWrapper}>
            <canvas ref={canvasRef} className={styles.canvas} id='canvas'></canvas>
            <canvas
              ref={magnifierRef}
              className={`${styles.magnifier} ${magnifierShape === 'circle' ? styles.circle : styles.square}`}
              id='magnifier'
              style={{ border: `${magnifierBorderSize}px solid rgba(248, 246, 246,0.7)` }}>
            </canvas>
          </div>

          <div className={styles.controlsWrapper}>
            <label className={styles.label}>
              放大镜形状:
              <select onChange={magnifierShaperOnchange}>
                <option value='circle'>圆形</option>
                <option value='square'>方形</option>
              </select>
            </label>
            <label className={styles.label}>
              放大镜大小:
              <select defaultValue='50' onChange={magnifierSizeOnchange}>
                <option value='30'>30px</option>
                <option value='40'>40px</option>
                <option value='50'>50px</option>
                <option value='60'>60px</option>
                <option value='70'>70px</option>
                <option value='80'>80px</option>
                <option value='90'>90px</option>
                <option value='100'>100px</option>
              </select>
            </label>
            <label className={styles.label}>
              放大镜边框大小:
              <select defaultValue='2' onChange={magnifierBorderSizeOnchange}>
                <option value='0'>0px</option>
                <option value='1'>1px</option>
                <option value='2'>2px</option>
                <option value='3'>3px</option>
                <option value='4'>4px</option>
                <option value='5'>5px</option>
                <option value='6'>6px</option>
                <option value='7'>7px</option>
                <option value='8'>8px</option>
                <option value='9'>9px</option>
              </select>
            </label>
            <label className={styles.label}>
              放大倍数：
              <select defaultValue='1.5' onChange={zoomOnchange}>
                <option value={1.5 * 0.766}>1.5</option>
                <option value={2 * 0.766}>2</option>
                <option value={2.5 * 0.766}>2.5</option>
                <option value={3 * 0.766}>3</option>
              </select>
            </label>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CanvasMagnifier;